<template>
  <div class="number">
    <ul id="dataNums">
      <li v-if="!dot" v-for="(item, index) in list" :key="index">
        <div class="dataBoc">
          <div
            class="tt"
            :style="{ transition: sub[index], top: '-' + item.top + 'px' }"
          >
            <span v-for="(item2, index2) in numList" :key="index2">{{
              item2
            }}</span>
          </div>
        </div>
      </li>
      <li v-for="(item, index) in list1" :key="index">
        <div class="dataBoc">
          <div
            class="tt"
            :style="{ transition: sub[index], top: '-' + item.top + 'px' }"
          >
            <span v-for="(item2, index2) in numList" :key="index2">{{
              item2
            }}</span>
          </div>
        </div>
      </li>
      <li v-if="dot"><span>.</span></li>
      <li v-for="(item, index) in list2" :key="index + 'list2'">
        <div class="dataBoc">
          <div
            class="tt"
            :style="{ transition: sub[index], top: '-' + item.top + 'px' }"
          >
            <span v-for="(item2, index2) in numList" :key="index2">{{
              item2
            }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "No1Test",
  props: ["num"], // 父组件传递对应的数值
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      number: this.num,
      // number1: "",
    };
  },
  mounted() {
    // 页面刷新渲染
    this.scroll();

    // 定时重置数据动画
    setInterval(() => {
      this.number = "";
      this.scroll();
    }, 7000); //控制刷新时间
    setInterval(() => {
      this.number = "";
      this.number = this.num;
      this.scroll();
    }, 7002); //控制刷新时间
  },
  methods: {
    // 遍历生成对应的num top
    traverse(lists) {
      const arr = [];
      lists.forEach((value) => {
        arr.push({ num: value, top: 0 });
      });
      return arr;
    },

    // 对需滚动数组处理
    scroll() {
      // 有小数点的话对数据一小数点为中介左右拆分
      if (this.number.toString().indexOf(".") === -1) {
        // 没有小数点
        this.list = this.number.toString().split("");
        this.list = this.traverse(this.list);
        let Hei = parseFloat(
          getComputedStyle(document.getElementById("dataNums")).height
        );
        this.list.forEach((value, index) => {
          setTimeout(() => {
            value.top = parseFloat(value.num * Hei + Hei * 10);
          }, index * 300);
        });
      } else {
        // 有小数点
        this.list = this.number.toString().split(".");
        this.list1 = this.list[0]?.split("");
        this.list2 = this.list[1]?.split("");
        this.list = [this.list1, this.list2];

        // 判断数组是否为空
        if (!this.list1) {
          return;
        }
        this.list1 = this.traverse(this.list1);

        // 判断数组是否为空
        if (!this.list2) {
          return;
        }
        this.list2 = this.traverse(this.list2);

        // 控制滚动高度

        let Hei = parseFloat(
          getComputedStyle(document.getElementById("dataNums")).height
        );

        // 按顺序执行滚动动画

        // 控制小数点左边
        this.list1.forEach((value, index) => {
          setTimeout(() => {
            value.top = parseFloat(Hei * 10);
            value.top = parseFloat(value.num * Hei + Hei * 10);
          }, index * 300);
        });
        // 控制小数点右侧
        this.list2.forEach((value, index) => {
          let index2 = this.list1.length + index + 2;
          setTimeout(() => {
            value.top = parseFloat(value.num * Hei + Hei * 10);
          }, index2 * 300);
        });
      }
    },
  },
  computed: {
    //是否有小数点

    dot() {
      if (this.num.indexOf(".") === -1) {
        return false;
      }
      return true;
    },

    //控制从0到对应数字的滚动时间

    sub() {
      var list = this.number.toString().split("");
      let arr = [];
      list.forEach((value) => {
        arr.push("all " + value * 0.5 + "s ease-in-out 0s");
      });
      return arr;
    },
  },
};
</script>
<style scoped>
.number {
  text-align: center;
}
ul {
  display: inline-block;
  height: 40px;
  text-align: center;
}
li {
  list-style: none;
  float: left;
  width: 20px;
  height: 40px;
  text-align: center;
  background-size: 100% 100%;
}

.dataBoc {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
span {
  width: 100%;
  height: 100%;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size: 26px;
  color: #f64841;
}
</style>
